<template>
	<view>
        <!-- 店铺信息 -->
        <view class="shop-header u-flex">
            <u-image mode="widthFix" width="200rpx" :src="shopInfo.shop_logo" v-if="shopInfo.shop_logo"></u-image>
            <u-image mode="widthFix" width="200rpx" src="/static/images/icon-no-shop-logo.png" v-else></u-image>
            <view class="u-margin-left-15 u-flex-1">
                <view>{{shopInfo.shop_name}}</view>
                <view class="follow-text" >{{shopInfo.shop_collect}}人关注</view>
            </view>
            <view class="follow-view">
                <u-button v-if="shop_collected" shape="circle" size="mini" type="error" @click="cancelCollection"><u-icon name="heart" size="30"></u-icon>已收藏</u-button>
                <u-button v-if="!shop_collected" shape="circle" size="mini" type="default" @click="collection"><u-icon name="heart" size="30"></u-icon>收藏</u-button>
            </view>
        </view>

        <!-- 首页 -->
        <view v-if="current == 0" style="height: 100%;overflow: hidden;">
            <!-- 店铺补贴额度 -->
            <view class="u-flex u-flex-wrap" v-if="couponList && couponList.length">
                <view class="coupon-item" v-for="(coupon, index) in couponList" :key="index" @click="receiveCoupon(coupon)">
                    <view class="coupon-left">
                        <view class="price u-line-1">￥{{coupon.coupon_price}}</view>
                        <view class="text u-line-1">满{{coupon.coupon_threshold_price}}元可用</view>
                    </view>
                    <view class="coupon-right">
                        <view>补贴额度</view>
                        <view>领取</view>
                    </view>
                </view>
            </view>

            <!-- banner -->
            <view class="banner-view" v-if="sildesList && sildesList.length">
                <u-swiper :list="sildesList" :height="260" :border-radius="20" @click="handleSlide"></u-swiper>
            </view>

            <!-- 新品推荐 -->
            <view class="tag-item">
                <view class="title">新品推荐</view>
                <view class="goods-list-view" >
                    <view class="goods-list u-flex" v-for="(goods,index) in newGoodsList" :class="[(index + 1) % 2 == 0 ? 'list-b' : '', 'goods-list' ]"  :key="index">
                        <navigator :url="'/goods-module/goods?goods_id='+goods.goods_id" hover-class="none">
                            <goods-cell-search
                                :doublerowShow="true"
                                :goodsName="goods.goods_name"
                                :goodsImg="goods.thumbnail"
                                :goodsPrice="goods.price"
                                :goodsBuyCount="goods.buy_count"
                                :goodsCommentNum="goods.comment_num"
                            ></goods-cell-search>
                        </navigator>
                    </view>
                </view>
            </view>

            <!-- 热卖排行 -->
            <view class="tag-item">
                <view class="title">热卖排行</view>
                <view class="goods-list-view" >
                    <view class="goods-list u-flex" v-for="(goods,index) in hotGoodsList" :class="[(index + 1) % 2 == 0 ? 'list-b' : '', 'goods-list' ]"  :key="index">
                        <navigator :url="'/goods-module/goods?goods_id='+goods.goods_id" hover-class="none">
                            <goods-cell-search
                                :doublerowShow="true"
                                :goodsName="goods.goods_name"
                                :goodsImg="goods.thumbnail"
                                :goodsPrice="goods.price"
                            ></goods-cell-search>
                        </navigator>
                    </view>
                </view>
            </view>

            <!-- 推荐商品 -->
            <view class="tag-item">
                <view class="title">推荐商品</view>
                <view class="goods-list-view" >
                    <view class="goods-list u-flex" v-for="(goods,index) in recommendGoodsList" :class="[(index + 1) % 2 == 0 ? 'list-b' : '', 'goods-list' ]"  :key="index">
                        <navigator :url="'/goods-module/goods?goods_id='+goods.goods_id" hover-class="none">
                            <goods-cell-search
                                :doublerowShow="true"
                                :goodsName="goods.goods_name"
                                :goodsImg="goods.thumbnail"
                                :goodsPrice="goods.price"
                            ></goods-cell-search>
                        </navigator>
                    </view>
                </view>
            </view>

            <u-gap height="100" bg-color="#f3f4f6"></u-gap>
        </view>

        <!-- 商品页 -->
        <view v-if="current == 1">
            <!-- 搜索框 -->
            <view class="search-view u-flex u-row-between">
                <view class="search" @click="goSearchByKeyword">
                    <u-search placeholder="搜索店内商品" :show-action="false"></u-search>
                </view>
                <view>
                    <u-button shape="circle" size="mini" @click="goChangeCat()">店铺分类</u-button>
                </view>
            </view>
            <mescroll-body ref="mescrollRef" top="0" auto="false" :down="down"  @init="mescrollInit" @up="upCallback">
                <view class="goods-list-view u-m-l-20 u-m-t-10 u-m-r-20" >
                    <view class="goods-list u-flex" :class="[(index + 1) % 2 == 0 ? 'list-b' : '', 'goods-list' ]" v-for="(goods,index) in allGoodsList" :key="index">
                        <navigator :url="'/goods-module/goods?goods_id='+goods.goods_id" hover-class="none">
                            <goods-cell-search
                                :doublerowShow="true"
                                :goodsName="goods.goods_name"
                                :goodsImg="goods.thumbnail"
                                :goodsPrice="goods.price"
                                :goodsBuyCount="goods.buy_count"
                                :goodsCommentNum="goods.comment_num"
                            ></goods-cell-search>
                        </navigator>
                    </view>
                </view>
            </mescroll-body>
        </view>

        <!-- 分类页 -->
        <view v-if="current == 2">
            <view class="cat-list-view">
                <view class="cat-tem-view" v-for="(cat,index) in catList" :key="index">
                    <view class="u-flex u-row-between" @click="goSearchByShopCatId(cat)">
                        <view>{{cat.shop_cat_name}}</view>
                        <view><u-icon name="arrow-right"></u-icon></view>
                    </view>
                    <view class="cat-tags u-flex u-row-between u-flex-wrap" v-if="cat.children.length > 0">
                        <view class="cat-tag" v-for="(childCat,childIndex) in cat.children" :key="childIndex" @click="goSearchByShopCatId(childCat)" >{{childCat.shop_cat_name}}</view>
                    </view>
                </view>
            </view>
        </view>

        <u-tabbar v-model="current" :list="tabList" :mid-button="false" @change="setChange"></u-tabbar>
        <u-toast ref="uToast" />
	</view>
</template>

<script>

    import * as API_Goods from '@/api/goods.js'
    import * as API_Shop from '@/api/shop.js'
    import * as API_Promotions from '@/api/promotions.js'
    import * as API_Member from '@/api/members.js'
    import Cache,{Keys} from '@/utils/cache.js'

    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
        mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
                shop_id: 0,
                shop_collected:false, //商品是否已经被当前会员收藏
                shopInfo: {},
                keyword: '',
                sildesList: [],
                newGoodsList: [],
                hotGoodsList: [],
                recommendGoodsList: [],
                allGoodsList: [],
                catList: [],
                couponList: [],
                tabList: [{
                        iconPath: "home",
                        selectedIconPath: "home-fill",
                        text: '店铺首页',
                        customIcon: false,
                    },
                    {
                        iconPath: "grid",
                        selectedIconPath: "grid-fill",
                        text: '全部商品',
                        customIcon: false,
                    },
                    {
                        iconPath: "list-dot",
                        selectedIconPath: "list",
                        text: '店铺分组',
                        customIcon: false,
                    },
                    // #ifdef APP-PLUS || H5
                    {
                        iconPath: "kefu-ermai",
                        selectedIconPath: "server-fill",
                        text: '客服',
                        isDot: false,
                        customIcon: false,
                    },
                    //  #endif
                ],
                current: 0,
                params: {
                    page_no: 1,
                    page_size: 10,
                    seller_id: 0,
                },
                down: {
                    auto: false,
                    isLock: true,
                },
			};
		},
        onLoad(options) {
            this.shop_id = options.shop_id;
            this.params.seller_id = options.shop_id;
            if(options.tabNum == 1){
                this.params.page_no = 0;
            }
            this.current = options.tabNum || 0;


            this.getSeller();

            this.getShopCoupons();

            this.getTagGoods('new');
            this.getTagGoods('hot');
            this.getTagGoods('recommend');

            if (Cache.getItem('user')) {
                this.getShopIsCollect();
            }
        },
        methods: {
            onGoodsDetail(goodsId){
                uni.navigateTo({
                    url: '../goods/goods?goods_id='+goodsId
                })
            },
            getSeller(){
                API_Shop.getShopBaseInfo(this.shop_id).then(res => {
                    this.shopInfo = res;
                    uni.setNavigationBarTitle({
                        title: res.shop_name
                    })
                })

                API_Shop.getShopSildes(this.shop_id, 'MOBILE').then(res => {
                    if(res) {
                        res.forEach(item => {
                            item.image = item.img
                        })
                    }
                    this.sildesList = res;
                })

                API_Shop.getShopCategorys(this.shop_id).then(res => {
                    this.catList = res;
                })
            },
            getTagGoods(tagName){
                API_Goods.getTagGoods(this.shop_id,tagName,10).then(res => {
                    if(tagName === 'new'){
                        this.newGoodsList = res;
                    }
                    if(tagName === 'hot'){
                        this.hotGoodsList = res;
                    }
                    if(tagName === 'recommend'){
                        this.recommendGoodsList = res;
                    }

                })
            },
            getAllGoodsList(){
                API_Goods.getGoodsList(this.params).then(res => {
                    const _allGoodsList = res.data;
                    _allGoodsList.forEach(goods => {
                        goods.goods_name = goods.name
                    })
                    if(this.params.page_no == 1) this.allGoodsList = []; //如果是第一页需手动置空列表
                    this.allGoodsList = this.allGoodsList.concat(_allGoodsList);
                    this.mescroll.endBySize(res.data.length, res.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            },
            //获取店铺收藏状态
            getShopIsCollect(){
                API_Member.getShopIsCollect(this.shop_id).then(res => {
                    this.shop_collected = res.message
                })
            },
            //读取店铺补贴额度
            getShopCoupons(){
                API_Promotions.getShopCoupons(this.shop_id).then(res => {
                    this.couponList = res;
                })
            },
            //领取补贴额度
            receiveCoupon(coupon) {
                this.judgeLogin(() => {
                    API_Member.receiveCoupons(coupon.coupon_id).then(res => {
                        this.$refs.uToast.show({
                            title: '领取成功',
                            type: 'success'
                        })
                    })
                })
            },
            //收藏店铺
            collection(){
                let $this = this;
                this.judgeLogin(() => {
                    API_Shop.collectionShop(this.shop_id).then(res => {
                        this.shop_collected=true
                        this.$refs.uToast.show({
                            title: '收藏成功',
                            type: 'success'
                        })
                    })
                })
            },
            //取消收藏店铺
            cancelCollection(){
                let $this = this;
                this.judgeLogin(() => {
                    API_Shop.canCalcollectionShop(this.shop_id).then(res => {
                        this.shop_collected=false
                        this.$refs.uToast.show({
                            title: '已取消收藏',
                            type: 'success'
                        })
                    })
                })
            },
            //下拉刷新
            downCallback(){
                this.allGoodsList = [];
                //this.getAllGoodsList();
            },
            //上拉加载数据
            upCallback (page){
                this.params.page_no += 1 ;
                this.getAllGoodsList();
            },
            setChange(index){
                if(index === 1){
                    this.params.page_no = 0;
                }
                if(index === 3){
                    this.handleChat();
                }
            },
            //点击店内搜索，跳转搜索页
            goSearchByKeyword(){
                const _params = {
                    seller_id: this.shop_id,
                }
                uni.navigateTo({
                    url: '/pages/search/search'+this.$u.queryParams(_params, true, 'indices'),
                })
            },
            goChangeCat(){
                this.current = 2;
            },
            //点击店铺分类，跳转商品列表页
            goSearchByShopCatId(cat){
                const _params = {
                    shop_cat_id: cat.shop_cat_id,
                    seller_id: this.shop_id,
                }
                uni.navigateTo({
                    url: '/goods-module/goods-list'+this.$u.queryParams(_params, true, 'indices'),
                })
            },
            //客服
            handleChat() {
                if (this.shopInfo.shop_qq) {
                    // #ifdef H5
                    console.log('H5')
                    location.href="http://wpa.qq.com/msgrd?v=3&uin="+this.shopInfo.shop_qq+"&site=qq&menu=yes"
                    // #endif
                    // #ifdef APP-PLUS
                    console.log('APP')
                    plus.runtime.openURL('mqq://im/chat?chat_type=wpa&uin='+this.shopInfo.shop_qq+'&version=1&src_type=web');
                    // #endif
                } else {
                    this.$u.toast('该店铺未设置客服账号')
                }
            },
            // 幻灯片点击事件
            handleSlide(index) {
                const { operation_type ,operation_param } = this.sildesList[index]
                switch (operation_type) {
                  // 链接地址
                  case 'URL': uni.navigateTo({ url: `/pages${operation_param}${operation_param}` })
                      break
                  // 商品
                  case 'GOODS': uni.navigateTo({ url: `/goods-module/goods?goods_id=${operation_param}` })
                      break
                  // 关键字
                  case 'KEYWORD': uni.navigateTo({ url: `/goods-module/goods-list?keyword=${operation_param}` })
                      break
                  // 店铺
                  case 'SHOP': uni.navigateTo({ url: `/pages/shop/shop?shop_id=${operation_param}` })
                      break
                  // 分类
                  case 'CATEGORY': uni.navigateTo({ url: `/goods-module/goods-list?category=${operation_param}` })
                      break
                }
            }
        }
	}
</script>

<style lang="scss">
    @import '../../static/common/css/live-video.scss';
    .shop-header {
        padding: 20rpx;
        background-color: #FFFFFF;
        .follow-text {
            font-size: 26rpx;
        }
    }

    .coupon-item {
        width: 320rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 20rpx 26rpx;
        text-align: center;
        .coupon-left {
            padding: 20rpx;
            width: 200rpx;
            border-radius: 8rpx 0rpx 0rpx 8rpx;
            background: linear-gradient(to right, #2979ff 0%, #2979ff 100%);
            color: #FFFFFF;
            .price {
                font-size: 40rpx;
                font-weight: 600;
            }
            .text {
                font-size: 22rpx;
            }
        }
        .coupon-right {
            padding: 20rpx 0rpx;
            width: 120rpx;
            border-radius: 0rpx 8rpx 8rpx 0rpx;
            background-color: #FFFFFF;
            color: #2979ff;
        }
    }

    .banner-view {
        margin: 20rpx;
    }

    .tag-item {
        margin: 20rpx;
        clear: both;
        .title {
            font-size: 38rpx;
            font-weight: 600;
            text-align: center;
        }
    }
    .search-view {
        background-color: #FFFFFF;
        padding: 20rpx;
        .search {
            width: 550rpx;
        }
    }
    .sort-box {
        margin: 10rpx 0rpx;
    }

    .cat-list-view {
        .cat-tem-view {
            background-color: #FFFFFF;
            margin: 20rpx;
            padding: 30rpx 20rpx;
            border-radius: 15rpx;
            font-size: 32rpx;
        }
        .cat-tags {
            margin-top: 10rpx;
            width: 100%;
            .cat-tag {
                width: 100%;
                background-color: #F4F4F5;
                margin: 5rpx 0rpx;
                border-radius: 8rpx;
                padding: 16rpx;
                font-size: 32rpx;
            }
        }
    }
    .goods-list-view {
        margin: 10rpx 20rpx 0 20rpx;
        border-radius: 15rpx 15rpx 0rpx 0rpx;
        .goods-list {
            width: 48%;
            float: left;
            background: #FFFFFF;
            overflow: hidden;
            margin: 10rpx 0;
            border-radius: 20rpx;
            &.list-b {
                margin-left: 24rpx;
            }
        }
    }
</style>
